import React, { FC, useContext } from 'react';

import { Droppable, Draggable } from 'react-beautiful-dnd';
import RenderField from '../RenderField';
import { DesignRedux } from '../DesignRedux';

import styles from './index.less';

const canDragInteractiveElements = true;

const CenterDesign: FC = (props: any) => {
  const { droppableId } = props;
  const { globalState } = useContext(DesignRedux);
  const { schema } = globalState;

  return (
    <>
      <Droppable droppableId={droppableId}>
        {(provided: any, snapshot: any) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={styles.qhDesignBody}
          >
            {schema.map((item: any, index: any) => {
              if (item.comName == 'ztTable') {
                return <RenderField key={index.toString()} nodeEle={item} />;
              }

              return (
                <Draggable
                  key={item.id}
                  draggableId={item.id}
                  index={index}
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  // disableInteractiveElementBlocking={canDragInteractiveElements}
                >
                  {(provided: any, snapshot: any) => {
                    return (
                      <div
                        key={index.toString()}
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <RenderField nodeEle={item} />
                      </div>
                    );
                  }}
                </Draggable>
              );
            })}
          </div>
        )}
      </Droppable>
    </>
  );
};

export default CenterDesign;
